import {
  Component,
  NgZone,
  OnInit,
  ViewChild,
  ElementRef,
} from '@angular/core';

@Component({
  selector: 'app-home-hot',
  templateUrl: './home-hot.component.html',
  styleUrls: ['./home-hot.component.less'],
})
export class HomeHotComponent implements OnInit {
  @ViewChild('timeRef', { static: true }) timeRef!: ElementRef;
  public _time: Date = new Date();
  constructor(private ngZone: NgZone) {}

  public get time(): Date {
    return this._time;
  }

  ngOnInit() {}
  ngAfterViewChecked(): void {
    // this._time = new Date().getTime();  这样子写会导致脏值检测出现问题

    // 这样子写就不会报错，因为这相当于在ng之外进行赋值，不会导致脏值检测出现问题
    this.ngZone.runOutsideAngular(() => {
      // this._time = new Date().getTime(); 注意也不能直接卸载这里，因为这相当于上面写法，同步操作，应该采用异步形式
      setInterval(() => {
        this._time = new Date();
      }, 100);
      // 如果要实现事件实时显示最好通过dom操作
      setInterval(() => {
        this.timeRef.nativeElement.innerText = Date.now();
      }, 100);
    });
  }
  handleClick() {}
}
